<template>
  <div>
    <div class="bigbox">
      <h2 class="text">产品新增/编辑</h2>
      <ul>
        <li>
          <div>产品名称：<input type="text" v-model="pname" /></div>
        </li>
        <li>
          <div>产品编号：<input type="text" v-model="id" /></div>
        </li>
        <li>
          <div>成本价：<input type="text" v-model="price" /></div>
        </li>
        <li>
          <div>库存数：<input type="text" v-model="count" /></div>
        </li>
        <li>
          <div>登记人：<input type="text" v-model="user" /></div>
        </li>
        <li>
          <span @click="save">保存</span>
          <span @click="cancel">取消</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      pname: "",
      id: "",
      price: "",
      count: "",
      user: "",
    };
  },
  methods: {
    ...mapMutations(["addarr"]),
    save() {
      this.$router.push("/home/product");
      this.addarr({
        pname: this.pname,
        id: this.id,
        price: this.price,
        count: this.count,
        user: this.user,
      });
    },
    cancel() {
      this.$router.push("/home/product");
    },
  },
};
</script>

<style lang = "less" scoped>
.bigbox {
  width: 500px;
  height: 400px;
  text-align: center;
  margin: 0 450px;
  .text {
    font-size: 25px;
    margin: 20px 0;
  }
  ul {
    li {
      display: flex;
      justify-content: center;
      margin: 20px;
      text-align: center;
      input {
        width: 260px;
        height: 20px;
      }
      span {
        width: 128px;
        height: 20px;
        background-color: rgb(239, 239, 239);
        padding: 20px 10px;
        margin: 10px 10px;
        font-size: 16px;
        border: 1px solid gray;
        cursor: pointer;
      }
    }
  }
}
</style>